<template>
    <van-skeleton avatar  title :row="10" v-if="loading">
    </van-skeleton>
    <div v-else  class="musicBox">
        <ul v-show="music">
            <div style="position: fixed;top: 14px;left: 10px;padding: 10px;background-color: gray;border-radius: 10px;color: white"  @click="goindex">
                <van-icon name="arrow-left" />
                <span>返回</span>
            </div>
            <div class="text">全部歌手</div>
            <li  v-for="(item,index) in musicList" :key="item.id" @click="singerMusic(item.id,item.img1v1Url)">
                <div class="index">{{index+1}}</div>
                <div class="singerImg">
                    <img :src="item.img1v1Url" alt="">
                </div>
                <div class="singer">
                    <div>
                        <p :class="(item.alias.length==0)?'a':'b'">{{item.name}}</p>
                        <p>{{item.alias[0]}}</p>
                    </div>
                </div>
            </li>
        </ul>
<!--        歌单-->
        <div class="singerlist" v-show="!music">
            <div class="background">
                <img :src="singimg" alt="">
            </div>
            <div class="musiclist">
                <ul>
                    <li v-for="(a,index) in hotSongs" :key="a.id" @click="play(a.id,index,a.name)">
                        <span style="font-weight: bolder">{{a.name}}</span>
                        <span :class="playShow==a.id?'c':'d'" style="float: right"><van-icon name="play-circle"/></span>
                    </li>
                </ul>
            </div>
            <div style="position: fixed;top: 10px;left: 10px"  @click="gosinger">
                <van-icon name="arrow-left" />
                <span>返回</span>
            </div>
        </div>
        <div v-show="footershow" :class="footershow?'margin':'marginb'">
            <audio :src="url" controls autoplay id="audio"></audio>
            <button @click="next" :style="{'display':nextDisplay}" class="next">下一首</button>
            <button @click="last" :style="{'display':lastDisplay}" class="last">上一首</button>
            <div class="textmusic" v-text="name"></div>
        </div>
    </div>
</template>

<script>

    import {singer,singerList,musicUrl} from "../api/api"
    export default {
        name: "Music",
        data(){
            return {
                musicList:[],
                loading: true,
                hotSongs:[],
                music:true,
                singimg:'',
                url:'',
                playShow:'',
                index:-1,
                idList:[],
                nextDisplay:'block',
                lastDisplay:'none',
                footershow:false,
                name:'',
                nameList:[]
            }
        },
        created() {

            singer().then(res=>{
                // console.log(res)
                if(res.data.code==200){
                    this.musicList = res.data.artists
                    this.loading = false
                }
            });
        },
        methods:{
            //去首页
            goindex(){
                this.$router.push('/index')
            },
            //去歌单页
            singerMusic(id,img){
                singerList(id).then(res=>{
                    if(res.data.code==200){
                        this.hotSongs = res.data.hotSongs
                        this.music = false
                        this.singimg = img
                        this.footershow = true
                        this.idList = []
                        this.nameList = []
                        res.data.hotSongs.forEach(value => {
                            this.idList.push(value.id)
                            this.nameList.push(value.name)
                        })
                        // console.log(this.nameList)
                    }
                })
            },
            //去歌手页
            gosinger(){
                this.music = true
            },
            //播放
            play(id,index,name){
                musicUrl(id).then(res=>{
                    // console.log(res)
                    var audio = document.getElementById("audio");
                    if(res.data.code==200){
                        if(res.data.data[0].url==null){
                            this.url=''
                            audio.pause()
                            alert('不能播放')
                        }else {
                            this.url = res.data.data[0].url
                        }
                        this.playShow = id
                        this.index = index
                        this.name = name
                    }
                    if((this.index+1) >= this.idList.length){
                        this.nextDisplay = 'none'
                    }else {
                        this.nextDisplay = 'block'
                    }
                    if(this.index==0){
                        this.lastDisplay = 'none'
                    }else {
                        this.lastDisplay = 'block'
                    }
                    //播放器
                    var autoplay = () =>{
                        // console.log(this)
                        var audio = document.getElementById("audio");
                        audio.loop = false;
                        audio.addEventListener('ended', ()=> {
                            this.index++
                            musicUrl(this.idList[this.index]).then(res=>{
                                if(res.data.code==200){
                                    if(res.data.data[0].url==null){
                                        this.url=''
                                        audio.pause()
                                        alert('不能播放')
                                    }else {
                                        this.url = res.data.data[0].url
                                    }
                                    this.playShow = this.idList[this.index]
                                    this.name = this.nameList[this.index]
                                }
                                if((this.index+1) >= this.idList.length){
                                    this.index = this.idList.length
                                    this.nextDisplay = 'none'
                                }else {
                                    this.nextDisplay = 'block'
                                }
                                if(this.index==0){
                                    this.lastDisplay = 'none'
                                }else {
                                    this.lastDisplay = 'block'
                                }
                            })
                        }, false);
                    }
                    autoplay()
                })
            },
            //暂停

            // 下一首
            next() {
                var audio = document.getElementById("audio");
                this.index++
                musicUrl(this.idList[this.index]).then(res=>{
                    if(res.data.code==200){
                        if(res.data.data[0].url==null){
                            this.url=''
                            audio.pause()
                            alert('不能播放')
                        }else {
                            this.url = res.data.data[0].url
                        }
                        this.playShow = this.idList[this.index]
                        this.name = this.nameList[this.index]
                    }
                    if((this.index+1) >= this.idList.length){
                        this.index = this.idList.length
                        this.nextDisplay = 'none'
                    }else {
                        this.nextDisplay = 'block'
                    }
                    if(this.index==0){
                        this.lastDisplay = 'none'
                    }else {
                        this.lastDisplay = 'block'
                    }
                })
                // autoplay()
            },
            // 上一首
            last(){
                var audio = document.getElementById("audio");
                this.index--
                // console.log(this.index)
                musicUrl(this.idList[this.index]).then(res=>{
                    if(res.data.code==200){
                        if(res.data.data[0].url==null){
                            this.url=''
                            audio.pause()
                            alert('不能播放')
                        }else {
                            this.url = res.data.data[0].url
                        }
                        this.playShow = this.idList[this.index]
                        this.name = this.nameList[this.index]
                    }
                    if((this.index+1) >= this.idList.length){
                        this.index = this.idList.length
                        this.nextDisplay = 'none'
                    }else {
                        this.nextDisplay = 'block'
                    }
                    if(this.index <= 0){
                        this.index = -1
                        this.lastDisplay = 'none'
                    }else {
                        this.lastDisplay = 'block'
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .music {
        height: 100vh;
        background-image: url("../assets/网易云背景.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .musicBox>ul>li {
        display: flex;
        justify-content: space-between;
        height: 130px;
        padding: 10px;
        box-sizing: border-box;
        /*box-shadow:0px 5px 20px #888888;*/
    }
    .index {
        margin-left: 10px;
        line-height: 110px;
    }

    .singerImg {
        width: 30%;
    }
    .singer {
        width: 40%;
        text-align: center;
    }
    .singerImg img {
        width: 100%;
        height: 100%;
        border-radius: 20%;
    }
    /*显示歌单*/
    /deep/.a {
        margin-top: 40px;
    }
    /deep/.b {
        margin-top: 25px;
    }
    .text {
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 20px;
        text-align: center;
        color: transparent;
        background-image: -webkit-gradient(linear,left top,right top,color-stop(0,skyblue),color-stop(1,hotpink));
        -webkit-background-clip: text;
    }
    /*歌单*/
    .background {
        width: 100%;
        /*height: 80vh;*/
    }
    .singerlist img {
        width: 100%;
        height: 100%;
        opacity: 0.6;
    }
    .musiclist {
        position: fixed;
        top: 40vh;
        width: 100%;
        height: 60vh;
        overflow: scroll;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .musiclist>ul {
        margin-bottom: 100px;
    }
    .musiclist>ul>li {
        margin-bottom: 25px;
    }
    /*播放*/
    .c {
        display: none;
    }
    .d {
        display: block;
    }
    audio {
        position: fixed;
        bottom: 0px;
        width: 100%;
        border-radius: 0px;
    }
    .next {
        position: fixed;
        bottom: 53px;
        right: 30px;
        width: 80px;
        height: 40px;
        border-radius: 40px 40px 0 0;
        border: 0;
        outline: 0;
    }
    .last {
        position: fixed;
        bottom: 53px;
        left: 30px;
        width: 80px;
        height: 40px;
        border-radius: 40px 40px 0 0;
        border: 0;
        outline: 0;
    }
    .textmusic {
        width: 100px;
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        position: fixed;
        bottom: 53px;
        left: 35%;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
    }
    .margin {
        margin-top: 70px;
    }
    .marginb {
        margin-top: 0px;
    }
</style>